import type { StorybookConfig } from '@storybook/react-vite';
import { mergeConfig } from 'vite';
import path from 'path';

const config: StorybookConfig = {
  stories: [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-onboarding"
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {}
  },
  docs: {
    autodocs: "tag"
  },
  async viteFinal(config) {
    return mergeConfig(config, {
      resolve: {
        alias: [
          { find: '@', replacement: path.resolve(__dirname, '../src') },
          { find: '@/components', replacement: path.resolve(__dirname, '../src/components') },
          { find: '@/types', replacement: path.resolve(__dirname, '../src/types') },
        ],
      },
      css: {
        postcss: async () => {
          return {
            plugins: [
              (await import('tailwindcss')).default,
              (await import('autoprefixer')).default,
            ],
          };
        },
      },
      optimizeDeps: {
        include: ['react', 'react-dom'],
      },
    });
  }
};

export default config;